<template>
    <div>
        <div v-bind:class="{ 'head-img-hover': isHeadImgHover }" style="z-index:2020;position:relative;width:40px;height:40px;float:left;margin-left:15px;cursor:pointer;" v-if="showUserInfo">
            <div  v-if="showHeadImgMini" @mouseover="headImgHover">
                <img :src="userHeadImgBase64" style="width:40px;height:40px;border-radius:20px;"/>
            </div>

            <div v-if="showHeadImgDetail" @mouseleave="headImgDetailOut" style="position:relative;width:280px;min-height:500px;margin-left:-120px;background-color:#ffffff;top:20px;border-radius: 3px;">
                <div style="position:relative;width:80px;height:80px;margin-left:100px;top:-40px;border-radius:40px">
                    <img :src="userHeadImgBase64" height="80" width="80" style="border-radius:40px;"/>
                </div>
                <div style="position:relative;width:280px;height:30px;color:black;text-align:center;line-height:30px;top:-30px;">
                    howl13143463188
                </div>
                <div class="choas-divider--horizontal"></div>
                <div style="width:240px;height:55px;margin-left:20px;">
                    <div class="guanzhu-fensi-dongtai">
                        <div style="width:100%;height:20px;color:#cccccc">关注</div>
                        <div style="width:100%;height:30px;color:#000000;font-size:16px;font-weight:bold;">21</div>
                    </div>
                    <div class="guanzhu-fensi-dongtai" >
                        <div style="width:100%;height:20px;color:#cccccc">粉丝</div>
                        <div style="width:100%;height:30px;color:#000000;font-size:16px;font-weight:bold;">22</div>
                    </div>
                    <div class="guanzhu-fensi-dongtai" >
                        <div style="width:100%;height:20px;color:#cccccc">动态</div>
                        <div style="width:100%;height:30px;color:#000000;font-size:16px;font-weight:bold;">3</div>
                    </div>
                </div>
                <div class="choas-divider--horizontal" style="margin-top:0px !important;"></div>

                <div v-bind:class="{'cham-navigater-is-selected': selectedUserNavigater===1 }" class="cham-user-navigater" @click="clickNavigater(1)">
                    <icon name="cham-user-centre" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">个人中心</span>
                </div>

                <div v-bind:class="{'cham-navigater-is-selected': selectedUserNavigater===2}" class="cham-user-navigater" @click="clickNavigater(2)">
                    <icon name="cham-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">待实现功能</span>
                </div>

                <div v-bind:class="{'cham-navigater-is-selected': selectedUserNavigater===3}" class="cham-user-navigater" @click="clickNavigater(3)">
                    <icon name="cham-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">待实现功能</span>
                </div>

                <div v-bind:class="{'cham-navigater-is-selected': selectedUserNavigater===4}" class="cham-user-navigater" @click="clickNavigater(4)">
                    <icon name="cham-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">待实现功能</span>
                </div>

                <div v-bind:class="{'cham-navigater-is-selected': selectedUserNavigater===5}" class="cham-user-navigater" @click="clickNavigater(5)">
                    <icon name="cham-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">待实现功能</span>
                </div>

                <div class="choas-divider--horizontal" style="margin-top:0px !important;"></div>

                <div v-bind:class="{'cham-navigater-is-selected': selectedUserNavigater===6}" class="cham-user-navigater" @click="clickNavigater(6)">
                    <icon name="cham-exit" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">退出</span>
                </div>
            </div>
        </div>

        <div style="float:left;width:80px;margin-left:8px;" v-if="showLoginAndRegister">
            <div style="float:left;width:40px;text-align:center;">
                <span style="cursor:pointer" @click="doLogin">登录</span>
            </div>

            <div style="float:left;width:40px;text-align:center;">
                <span style="cursor:pointer" @click="doRegistry">注册</span>
            </div>
        </div>

        <div style="float:left;width:160px;margin-left:8px;" v-if="showUserInfo">
            <div style="float:left;width:40px;text-align:center;">
                <span style="cursor:pointer">消息</span>
            </div>

            <div style="float:left;width:40px;text-align:center;">
                <span style="cursor:pointer">动态</span>
            </div>

            <div style="float:left;width:40px;text-align:center;">
                <span style="cursor:pointer">收藏</span>
            </div>

            <div style="float:left;width:40px;text-align:center;">
                <span style="cursor:pointer">历史</span>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'chamHeadImg',
        inject:['reload'],
        data () {
            return {
                searchHotPoint:"",//查询热点信息
                userHeadImgBase64:'',
                showLoginAndRegister:true,
                showUserInfo:false,
                searchHotPointWidth: 450,
                isHeadImgHover:false,
                showHeadImgDetail:false,
                showHeadImgMini:true,
                selectedUserNavigater:0
            }
        },
        created(){
            var self = this;
            var storage=window.localStorage;
            var chamTokenInfo = storage.getItem("chamToken");
            var userHeadImg  = storage.getItem("userHeadImg");

            var form = new Object();
            form.token = chamTokenInfo;

            if(chamTokenInfo!=null){
                self.$api.post('pdm-service/loginController/verifyToken', form, result => {
                    //token還沒失效
                    if(result){
                        self.showLoginAndRegister = false;
                        self.showUserInfo = true;
                        self.searchHotPointWidth = 350;
                        self.userHeadImgBase64 = userHeadImg;
                    }

                    //token失效
                    if(!result){
                        storage.removeItem("chamToken");
                        storage.removeItem("userHeadImg");
                    }

                });


            }

        },
        methods:{
            clickNavigater(index){
                var self = this;
                if(index===1){
                    self.selectedUserNavigater = 1;
                    self.$router.push({path:'/personalCentre'});
                }

                if(index===2){
                    self.selectedUserNavigater = 2;
                }

                if(index===3){
                    self.selectedUserNavigater = 3;
                }

                if(index===4){
                    self.selectedUserNavigater = 4;
                }

                if(index===5){
                    self.selectedUserNavigater = 5;
                }

                if(index===6){
                    self.selectedUserNavigater = 6;
                    //执行退出逻辑
                    var localStorage = window.localStorage;
                    localStorage.removeItem("chamToken");
                    //回到主页
                    self.$router.push({path:'/home'});
                    //调用reload()方法重新加载主页面
                    self.reload();
                }
            },
            headImgHover(){
                var self = this;
                self.showHeadImgDetail = true;
                self.showHeadImgMini = false;
                self.isHeadImgHover = true;

            },
            headImgDetailOut(){
                this.isHeadImgHover = false;
                this.showHeadImgDetail = false;
                this.showHeadImgMini = true;
                this.selectedUserNavigater = 0;
            },
            goHome(){
                this.reload();
            },
            doRegistry(){
                /**
                 * 通过路由跳转的方式跳转到registry页面！
                 */
                this.$router.push({path:'/registry'});
            },
            doLogin(){
                this.$router.push({path:'/login'});
            }
        }
    }
</script>

<style scoped>
    .chamHeader{
        width:100%;
        height:195px;
        min-width:999px;
    }

    /**
        没有下拉框的导航栏
     */
    .navigate-no-dropdown{
        color:#606266;
        cursor:pointer;
    }

    .navigate-no-dropdown:hover{
        color:#1890ff;
    }

    .cham-banner{
        width:100%;
        height:155px;
        min-width:999px;
        background-image:url('../../assets/banner.png');
        /**
         * 这个属性最重要，这个属性可以让图片左右自动居中，多余的部分隐藏掉
         */
        background-position: center 0;
    }

    .mini-header{
        height:56px;
        width:100%;
        /**
         * 背景色渐变
         */
        background-image:linear-gradient(rgba(51,51,51,0.6),rgba(51,51,51,0));
    }

    .mini-header__content{
        width:999px;
        height:36px;
        line-height:36px;
        margin:auto auto;
        padding:10px 24px;
    }

    .normal-span{
        margin-left:5px;
        cursor:pointer;
    }

    .navigate{
        width:999px;
        height:40px;
        margin:auto auto;
        line-height:40px;
    }

    .el-dropdown-link:hover{
        color:#1890ff;
    }

    .el-dropdown-link{
        cursor:pointer;
    }

    .logo-module{
        width:999px;
        height:100px;
        margin:auto auto;
    }

    .mini-logo{
        width:100px;
        height:100px;
        margin-top:-10px;
        margin-left:40px;
        cursor:pointer;
    }

    .head-img-hover{
        top:20px;
        left:2px;
    }

    .choas-divider--horizontal {
        display: block;
        height: 1px;
        width: 100%;
        background-color: #DCDFE6;
        position: relative;
        margin-top:-20px;
        margin-bottom:5px;
        /* margin: 24px 0; */
    }

    /**
    关注+粉丝+动态模块
     */
    .guanzhu-fensi-dongtai{
        float:left;
        width:33%;
        height:50px;
        text-align:center;
    }


    .guanzhu-fensi-dongtai:hover div{
        color:#73c9e5 !important;
    }

    .cham-user-navigater{
        /*width:calc(100% - 40px);*/
        height:60px;
        /*margin-left:20px;*/
        line-height:60px;
    }

    .cham-user-navigater:hover{
        background-color:#ECF5FF;
    }

    .cham-navigater-is-selected{
        background-color:#ECF5FF;
    }

    .cham-navigater-is-selected > svg,.cham-navigater-is-selected >span{
        color:#409EFF !important;
    }


</style>
